<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eduProcess</title>
<link rel="stylesheet" type="text/css" href="/resources/css/web.css" />
<script src="/resources/js/jquery.min.js" type="text/javascript"></script>
<script src="/resources/js/jquery.validate.min.js" type="text/javascript"></script>
<script src="/resources/js/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(
		function(){
			$(".login_tab").hover(function(){
				var tabId = $(this).attr("id");
				$.each($(".login_tab"), function(key, obj){
					if(tabId == obj.id){
						$("#"+obj.id).addClass("login_tab_active");
						$("#"+obj.id+"_body").show();
					}else{
						$("#"+obj.id).removeClass("login_tab_active");
						$("#"+obj.id+"_body").hide();
					}
				});
				return false;
			});
			
			var teacherLoginValidator = $("#teacherLoginForm").validate({
				submitHandler: function(form) {
					$("#submitLine").hide();
					$("#indicatorLine").show();
					
					$(form).ajaxSubmit({
						type:"post",
						datatype:"json",
						url: "/login/teacher",
						success: function(data){
							if(data.result){
								window.location.replace("/teacher/main");
							}else{
								var errMsg = '';
								$.each(data.errors, function(key, value){
									errMsg += key+":"+value + "\n";
								});
								alert(errMsg);
								teacherLoginValidator.showErrors(data.errors);
							}
						},
						error: function(){
							$("#submitLine").show();
							$("#indicatorLine").hide();
							alert("服务器处理异常");
						}
					});
				},
				rules:{
					"email": {
						required:	true,
						email:		true
					},
					"passwd":{
						required:	true
					},
					"verifyCode":{
						required:	true
					}
				},
				messages: {
					"email": {
						required:	"电子邮件 必须填写",
						email:		"请输入正确的电子邮件格式"
					},
					"passwd":{
						required:	"密码 必须填写"
					},
					"verifyCode":{
						required:	"验证码 必须填写"
					}
				},
				errorElement: "div",
				errorPlacement: function(error, element) {
					error.appendTo(element.parent());
					error.addClass('errormsg');
				},
				
				onkeyup: false
			});
		}
	);
</script>
</head>
<body>
	<div class="login_content content">
		<div style="float:right;bottom:0;">
			<div style="font-size:180%;padding-bottom:8px;color:#2672ec;font-weight:bold;">八一中学</div>
			<div style="padding-bottom:20px;font-size:86%;">不是该学校的？<a href="#">选择其它学校</a></div>
			<div>
				<ul style="">
					<li class="login_tab login_tab_active" id="teacher_tab">老师</li>
					<li class="login_tab" id="student_tab">学生</li>
					<li class="login_tab" id="parent_tab">家长</li>
				</ul>
			</div>
			<div class="login_tab_body" id="teacher_tab_body">
				<form id="teacherLoginForm" name="teacherLoginForm" method="post">
				<div >
					<input type="email" maxlength="128" name="email" value="" placeholder="teacher@sample.com" />
				</div>
				<div style="padding-top:10px">
					<input type="password" maxlength="128" name="passwd" value="" placeholder="密码" />
				</div>
				<div class="fieldtitle"><label>验证码</label> <a href="javascript:void(0)" id="refreshSignupVerification"><span style="font-size:90%">[点击获取新的字符]</span></a></div>
				<div><input type="text" id="verifyCode" name="verifyCode" value=""/></div>
				<div>
					<img src="/verification" id="signupVerification"/>
				</div>
				<div style="padding-top:10px;">
					<input type="checkbox" name="keeyOnline" id="keeyOnline" value="" style="position: absolute;padding: 0 0 0 0;width: 19px;height: 19px;margin: 0 0 0 0;float: left;cursor: default;"/>
					<label for="keeyOnline" style="padding-left:22px;font-size:90%;">保持登录状态</label>
				</div>
				
				<div style="padding-top:10px;" id="submitLine"><input type="submit" value="登录" /></div>
				<div id="indicatorLine" style="display:none;"><img src="/resources/image/progressindicator.gif" align="absmiddle"/> 提交中...</div>
				
				<div style="font-size:90%;padding-top:10px;"><a href="/resetpasswd">您的帐号无法登录？</a></div>
				<div style="padding-top:20px;">学校尚未开通？<a href="/signup">申请学校管理帐号</a></div>
				</form>
			</div>
			<div style="display:none;" class="login_tab_body" id="student_tab_body">
				<form id="teacherLoginForm" name="teacherLoginForm" method="post">
				<div >
					<input type="email" maxlength="128" name="" value="" placeholder="学籍号" />
				</div>
				<div style="padding-top:10px">
					<input type="password" maxlength="128" name="" value="" placeholder="密码"/>
				</div>
				<div style="padding-top:10px;">
					<input type="checkbox" name="keeyOnline" id="keeyOnline" value="" style="position: absolute;padding: 0 0 0 0;width: 19px;height: 19px;margin: 0 0 0 0;float: left;cursor: default;"/>
					<label for="keeyOnline" style="padding-left:22px;font-size:90%;">保持登录状态</label>
				</div>
				<div style="padding-top:30px;"><input type="submit" value="登录" /></div>
				
				<div style="font-size:90%;padding-top:30px;"><a href="#">您的帐号无法登录？</a></div>
				</form>
			</div>
			<div style="display:none;" class="login_tab_body" id="parent_tab_body">
				<form id="teacherLoginForm" name="teacherLoginForm" method="post">
				<div >
					<input type="email" maxlength="128" name="" value="" placeholder="学生学籍号" />
				</div>
				<div style="padding-top:10px">
					<input type="password" maxlength="128" name="" value="" placeholder="密码" />
				</div>
				<div style="padding-top:10px;">
					<input type="checkbox" name="keeyOnline" id="keeyOnline" value="" style="position: absolute;padding: 0 0 0 0;width: 19px;height: 19px;margin: 0 0 0 0;float: left;cursor: default;"/>
					<label for="keeyOnline" style="padding-left:22px;font-size:90%;">保持登录状态</label>
				</div>
				<div style="padding-top:10px;"><input type="submit" value="登录" /></div>
				
				<div style="font-size:90%;padding-top:10px;"><a href="#">您的帐号无法登录？</a></div>
			</div>
			</form>
		</div>
		<div style="width:477px;height:490px;background-color:#0072c6;color:#fff;">
			<div style="height:340px;"><img src="/resources/image/login_show.jpg" style="border:1px solid #ccc;"/></div>
			<div style="padding:20px;">
				eduProcess，专注提升教育品质
			</div>
		</div>
	</div>
	<div style="margin:0 auto;width:937px;padding:4px 20px 0px 20px;font-size:80%;border-top:1px solid #ccc;">
		<div style="float:right;text-align:right;">
			<li style="float:left; width:80px;"><span style="line-height:28px;color:#666;">使用帮助</span></li>
			<li style="float:left; width:80px;"><span style="line-height:28px;color:#666;">反馈</span></li>
		</div>
		<div>
			<li style="float:left; width:140px;"><span style="line-height:28px;color:#666;">&copy; 2013 eduProcess</span></li>
			<li style="float:left; width:80px;"><span style="line-height:28px;color:#666;">服务条款</span></li>
			<li style="float:left; width:80px;"><span style="line-height:28px;color:#666;">隐私声明</span></li>
		</div>
	</div>
</body>
</html>